<!--
 * @Description:
 * @Author: zhangweigang
 * @Date: 2021-03-21 12:20:53
 * @LastEditTime: 2021-05-05 10:29:09
 * @LastEditors: zhangweigang
-->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }"><span class="tW">首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="tW">书籍审核管理</span> </el-breadcrumb-item>
      <el-breadcrumb-item><span class="tW">审核列表</span></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <!--  :span 指定宽度 -->
        <el-col :span="5">
          <el-input placeholder="请输入书籍名称" v-model="bookName" clearable @clear="contentClear">
            <el-button slot="append" @click="onSubmit" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table class="pag" :data="listData" stripe border>
        <el-table-column label="书籍名称" header-align="center">
          <template slot-scope="scope">
            <!-- 查看按钮  -->
            <a :href="scope.row.bookUrl" target="_black" class="a-text">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" header-align="center"></el-table-column>
        <el-table-column prop="categoryName" label="书籍分类" header-align="center"></el-table-column>
        <el-table-column prop="publicationDate" width="180" label="出版时间" header-align="center"></el-table-column>
        <el-table-column prop="createDate" width="180" label="上传时间" header-align="center"></el-table-column>
        <el-table-column label="是否共享" width="120" header-align="center">
          <template slot-scope="scope">
            <!-- 1:共享书籍 2:非共享书籍 -->
            <el-tag type="success" v-if="scope.row.isShare == 1">已共享</el-tag>
            <el-tag type="danger" v-else>未共享</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否审核" width="120" header-align="center">
          <template slot-scope="scope">
            <!-- 审核标识 1:已审核 2:未审核 3:审核不通过 -->
            <el-tag type="success" v-if="scope.row.isAudit == 1">已审核</el-tag>
            <el-tag type="danger" v-else>未审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <!-- 审核 已审核 未审核 -->
            <el-button v-if="scope.row.isAudit == 2" type="primary" size="mini" @click="reviewShowBooks(scope.row)">审核</el-button>
            <el-button v-else type="info" size="mini" @click="revokeReview(scope.row)">撤销审核</el-button>
            <!-- 查看版权 -->
            <el-button type="success" size="mini" @click="lookCopyright(scope.row)">查看版权</el-button>
            <!-- 删除 -->
            <el-button type="danger" size="mini" @click="removeByIdBook(scope.row)">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 书籍分页 -->
      <div class="pag">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 版权信息弹出层 -->
    <el-dialog title="书籍版权" :visible.sync="copyrightDialogVisible" width="50%">
      <!-- 内容主体区域 -->
      <el-image :src="imgSrc"></el-image>
    </el-dialog>
    <!-- 审核信息弹框 -->
    <el-dialog title="审核内容" :visible.sync="reviewDialogVisible" @close="reviewDialogClosed" width="50%">
      <!-- 内容主体区域 -->
      <el-form :model="reviewMessageForm" :rules="reviewMessageRules" ref="reviewMessageRef" label-width="100px">
        <el-form-item label="审核内容" prop="auditContent">
          <el-input type="textarea" :rows="6" v-model="reviewMessageForm.auditContent"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMessageInfo">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import bookShareManagerInfoAipService from '@/network/aipBookShareService.js'
export default {
  data() {
    return {
      imgSrc: '', // 版权图
      copyrightDialogVisible: false,
      reviewDialogVisible: false,
      clearable: true, // 是否显示清除按钮
      currentPage: 1,
      total: 0,
      // 默认分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 每页显示多少条数据
      bookName: '', // 搜索关键字
      listData: [], // 书籍列表
      reviewMessageForm: {
        auditContent: ''
      },
      reviewMessageRules: {
        auditContent: [{ required: true, message: '回复内容不能为空！', trigger: 'blur' }]
      },
      tempScope: {}
    }
  },
  created() {
    // 书籍分页
    this.getPageData(this.pageNum, this.pageSize)
  },
  methods: {
    // 监听 pagesize 改变事件
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getPageData(this.pageNum, pageSize)
    },
    // 监听 页码值 改变事件
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getPageData(pageNum, this.pageSize)
    },
    /**
     * 书籍分页数据
     * @pageNum 当前页数
     * @pageSize 每页显示多少条数据
     */
    getPageData(pageNum, pageSize) {
      bookShareManagerInfoAipService.getBookPagination(pageNum, pageSize).then(res => {
        if (res.data.code === 0) {
          console.log(res, '所有共享书籍')
          this.total = res.data.total
          // 获取留言列表
          this.listData = res.data.rows
        } else {
          this.$message({
            showClose: true,
            message: '获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
          return
        }
      })
    },
    // 查询书籍
    onSubmit() {
      let params = {
        name: this.bookName
      }
      bookShareManagerInfoAipService.getBookByName(params).then(res => {
        if (res.data.code === 0) {
          this.total = res.data.total
          this.listData = res.data.rows
          this.$message.success('查询成功！')
        }
      })
    },
    contentClear() {
      this.getPageData(this.pageNum, this.pageSize)
    },
    reviewDialogClosed() {
      this.$refs.reviewMessageRef.resetFields()
    },
    // 保存审核内容
    saveMessageInfo() {
      console.log(this.reviewMessageForm.auditContent, '审核内容')
      let temp = {
        author: this.tempScope.author,
        bookUrl: this.tempScope.bookUrl,
        content: this.tempScope.content,
        copyrightUrl: this.tempScope.copyrightUrl,
        coverUrl: this.tempScope.coverUrl,
        createDate: this.tempScope.createDate,
        creator: this.tempScope.creator,
        delFlag: this.tempScope.delFlag,
        id: this.tempScope.id,
        isShare: this.tempScope.isShare,
        name: this.tempScope.name,
        publicationDate: this.tempScope.publicationDate,
        updateDate: this.tempScope.updateDate,
        updater: this.tempScope.updater,
        uploadDate: this.tempScope.uploadDate,
        uploadUserId: this.tempScope.uploadUserId
      }
      let params = {
        ...temp,
        ...this.reviewMessageForm,
        isAudit: 1
      }
      bookShareManagerInfoAipService.bookCopyRightReview(params).then(res => {
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: '审核成功！',
            type: 'success',
            duration: 4000
          })
          this.reviewDialogVisible = false
          this.getPageData(this.pageNum, this.pageSize)
        } else {
          this.$message({
            showClose: true,
            message: '审核失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
        }
      })
    },
    // 书籍审核
    reviewShowBooks(scope) {
      if (scope.copyrightUrl == '' || scope.copyrightUrl == undefined) {
        this.$message({
          showClose: true,
          message: '审核必须有版权信息！',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.reviewDialogVisible = true
      this.tempScope = scope
    },
    // 查看版权信息
    lookCopyright(scope) {
      console.log(scope, '版权图')
      this.imgSrc = scope.copyrightUrl
      this.copyrightDialogVisible = true
    },
    // 撤销审核
    revokeReview(scope) {
      let temp = {
        author: scope.author,
        bookUrl: scope.bookUrl,
        content: scope.content,
        copyrightUrl: scope.copyrightUrl,
        coverUrl: scope.coverUrl,
        createDate: scope.createDate,
        creator: scope.creator,
        delFlag: scope.delFlag,
        id: scope.id,
        isShare: scope.isShare,
        name: scope.name,
        publicationDate: scope.publicationDate,
        updateDate: scope.updateDate,
        updater: scope.updater,
        uploadDate: scope.uploadDate,
        uploadUserId: scope.uploadUserId,
        isAudit: 2,
        auditContent: '未审核'
      }
      bookShareManagerInfoAipService.bookCopyRightReview(temp).then(res => {
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: '撤销成功！',
            type: 'success',
            duration: 4000
          })
          this.reviewDialogVisible = false
          this.getPageData(this.pageNum, this.pageSize)
        } else {
          this.$message({
            showClose: true,
            message: '撤销失败，请联系管理员！',
            type: 'error',
            duration: 4000
          })
        }
      })
    },
    // 删除书籍
    async removeByIdBook(scope) {
      console.log(scope)
      const confirmResult = await this.$confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果点击确定 返回为 confirm，点击取消 返回为 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除操作！')
      }
      bookShareManagerInfoAipService.removeBookById(scope.id).then(res => {
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: '删除成功！',
            type: 'success',
            duration: 4000
          })
          this.getPageData(this.pageNum, this.pageSize)
        } else {
          this.$message({
            showClose: true,
            message: '删除失败，请联系管理员！',
            type: 'success',
            duration: 4000
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.pag {
  margin-top: 20px;
}
.a-text {
  text-decoration: underline;
  color: red;
}
</style>
